<route>
    {
        meta: {
            layout: 'index',
            title:'电缆信息管理'
        }
    }  
</route>
<template>
    <view>
        <div class="app-container">
            <a-row>
                <a-input-search v-model:value="searchKey" placeholder="请输入电缆信息" enter-button="搜索"
                    style="width: 250px; margin-bottom: 10px;" @search="handleQuery()" />
                <a-button style="margin-left: 10px;" type="dashed" @click="reset">重置</a-button>
                <a-button type="primary" style="margin-left: auto; margin-bottom: 10px; width: 100px;" @click="addItem">
                    <template #icon><plus-outlined /></template>新增
                </a-button>
            </a-row>

            <a-table :dataSource="dataSource" :columns="columns" bordered :scroll="{ x: 1000 }" :pagination="false">
                <template #bodyCell="{ column, text, record }">
                    <template
                        v-if="['softCopperDiameter', 'insulationLayerDiameter', 'protectiveLayerDiameter', 'diameter', 'weight', 'temperatureResistance', 'breakingForce', 'bendingDiameter', 'residualElongation', 'voltageResistance', 'insulationResistance', 'dcResistance', 'capacitance'].includes(column.dataIndex)">
                        <div>
                            <a-input-number v-if="editableData[record.id]"
                                v-model:value="editableData[record.id][column.dataIndex]" :min="0"
                                style="margin: -5px 0;width: 100%;" />
                            <template v-else>
                                {{ text }}
                            </template>
                        </div>
                    </template>
                    <template v-if="['manufacturer', 'elongation', 'pullOfRate'].includes(column.dataIndex)">
                        <div>
                            <a-input v-if="editableData[record.id]"
                                v-model:value="editableData[record.id][column.dataIndex]" style="margin: -5px 0" />
                            <template v-else>
                                {{ text }}
                            </template>
                        </div>
                    </template>
                    <template v-else-if="column.dataIndex === 'action'">
                        <div>
                            <span v-if="editableData[record.id]">
                                <a-button type="link" @click="save(record.id)">保存 </a-button>
                                <AntdZh><a-popconfirm title="取消编辑 ?" @confirm="cancel(record.id)">
                                    <a-button type="link">取消</a-button>
                                </a-popconfirm></AntdZh>
                            </span>
                            <span v-else>
                                <a-button type="link" @click="edit(record.id)">编辑</a-button>
                                <AntdZh><a-popconfirm title="确定删除该条记录 ?" @confirm="del(record.id)">
                                    <a-button type="link" danger>删除</a-button>
                                </a-popconfirm></AntdZh>
                            </span>
                        </div>
                    </template>
                </template>
            </a-table>
            <AntdZh>
                <a-pagination v-model:current="query.pageNum" v-model:pageSize="query.pageSize" :total="total"
                    @change="getList" />
            </AntdZh>

            <!-- 新版添加对话框 -->
            <AntdConfirmModal title="添加电缆" ref="modalRef" width="700px" :keepSlot="false" @confirm="submitForm">
                <a-form :model="form" name="basic" :label-col="{ span: 12 }">
                    <a-row>
                        <a-col :span="12">
                            <a-form-item label="电缆型号" name="cableId" :rules="[{ required: true, message: '请输入电缆ID' }]">
                                <a-input v-model:value="form.cableId" style="width: 150px;" placeholder="请输入电缆ID" />
                            </a-form-item>
                        </a-col>
                        <a-col :span="12">
                            <a-form-item label="直径" name="diameter">
                                <a-input-number v-model:value="form.diameter" style="width: 150px;"
                                    controls-position="right" :min="0" addon-after="mm" />
                            </a-form-item>
                        </a-col>
                        <a-col :span="12">
                            <a-form-item label="空气中重量" name="weight">
                                <a-input-number v-model:value="form.weight" style="width: 150px;" controls-position="right"
                                    :min="0" addon-after="kg/km" />
                            </a-form-item>
                        </a-col>
                        <a-col :span="12">
                            <a-form-item label="耐温" name="temperatureResistance">
                                <a-input-number v-model:value="form.temperatureResistance" style="width: 150px;"
                                    controls-position="right" :min="0" addon-after="℃" />
                            </a-form-item>
                        </a-col>
                        <a-col :span="12">
                            <a-form-item label="耐压" name="voltageResistance">
                                <a-input-number v-model:value="form.voltageResistance" style="width: 150px;"
                                    controls-position="right" :min="0" addon-after="MPa" />
                            </a-form-item>
                        </a-col>
                        <a-col :span="12">
                            <a-form-item label="拉断力" name="breakingForce">
                                <a-input v-model:value="form.breakingForce" style="width: 150px;" controls-position="right"
                                    :min="0" addon-after="kN" />
                            </a-form-item>
                        </a-col>
                        <!-- <a-col :span="12">
                            <a-form-item label="伸长率" name="elongation">
                                <a-input v-model:value="form.elongation" style="width: 150px;"
                                    controls-position="right" :min="0" />
                            </a-form-item>
                        </a-col> -->
                        <a-col :span="12">
                            <a-form-item label="弯曲直径" name="bendingDiameter">
                                <a-input-number v-model:value="form.bendingDiameter" style="width: 150px;"
                                    controls-position="right" :min="0" addon-after="mm" />
                            </a-form-item>
                        </a-col>
                        <a-col :span="12">
                            <a-form-item label="电容" name="capacitance">
                                <a-input-number v-model:value="form.capacitance" style="width: 150px;"
                                    controls-position="right" :min="0" addon-after="pf/m" />
                            </a-form-item>
                        </a-col>
                        <a-col :span="12">
                            <a-form-item label="绝缘电阻" name="insulationResistance">
                                <a-input-number v-model:value="form.insulationResistance" style="width: 150px;"
                                    controls-position="right" :min="0" addon-after="MΩ·km" />
                            </a-form-item>
                        </a-col>
                        <a-col :span="12">
                            <a-form-item label="直流电阻" name="dcResistance">
                                <a-input-number v-model:value="form.dcResistance" style="width: 150px;"
                                    controls-position="right" :min="0" addon-after="Ω/km" />
                            </a-form-item>
                        </a-col>
                        <a-col :span="12">
                            <a-form-item label="残余伸长量" name="residualElongation">
                                <a-input-number v-model:value="form.residualElongation" style="width: 150px;"
                                    controls-position="right" :min="0" addon-after="m/km/5kN" />
                            </a-form-item>
                        </a-col>
                        <a-col :span="12">
                            <a-form-item label="制造商" name="manufacturer">
                                <a-input v-model:value="form.manufacturer" style="width: 150px;"
                                    controls-position="right" />
                            </a-form-item>
                        </a-col>
                    </a-row>
                </a-form>
            </AntdConfirmModal>
        </div>
    </view>
</template>
<script setup>
import { cloneDeep } from 'lodash-es';
import { queryList, deleteOne, updateOne, createOne } from "@/api/tool/cable.js";
import { PlusOutlined } from '@ant-design/icons-vue';
import useApp from "@/hooks";
const { $, proxy } = useApp();
const modalRef = ref(null);
const data = reactive({
    form: {}
});
const { form } = toRefs(data);
const total = ref(1)
const dataSource = ref([]);
// 定义表格列配置
const columns = [
    {
        title: '电缆型号',
        dataIndex: 'cableId',
        key: 'cableId',
        fixed: 'left',
        width: 200
    },
    {
        title: '直径(mm)',
        dataIndex: 'diameter',
        key: 'diameter',
        width: 110
    },
    {
        title: '空气中重量(kg/km)',
        dataIndex: 'weight',
        key: 'weight',
        width: 110
    },
    {
        title: '耐温(℃)',
        dataIndex: 'temperatureResistance',
        key: 'temperatureResistance',
        width: 110
    },
    {
        title: '耐压(MPa)',
        dataIndex: 'voltageResistance',
        key: 'voltageResistance',
        width: 110
    },
    {
        title: '拉断力(KN)',
        dataIndex: 'breakingForce',
        key: 'breakingForce',
        width: 110
    },
    // {
    //     title: '伸长率',
    //     dataIndex: 'elongation',
    //     key: 'elongation',
    //     width: 110
    // },
    {
        title: '弯曲直径(mm)',
        dataIndex: 'bendingDiameter',
        key: 'bendingDiameter',
        width: 110
    },
    {
        title: '残余伸长量(m/km/5kN)',
        dataIndex: 'residualElongation',
        key: 'residualElongation',
        width: 110
    },
    {
        title: '绝缘电阻(MΩ·km)',
        dataIndex: 'insulationResistance',
        key: 'insulationResistance',
        width: 110
    },
    {
        title: '直流电阻(Ω/km)',
        dataIndex: 'dcResistance',
        key: 'dcResistance',
        width: 110
    },
    {
        title: '电容(pf/m)',
        dataIndex: 'capacitance',
        key: 'capacitance',
        width: 110
    },
    {
        title: '制造商',
        dataIndex: 'manufacturer',
        key: 'manufacturer',
        width: 150
    },
    {
        title: '操作',
        dataIndex: 'action',
        key: 'action',
        fixed: 'right',
        width: 160
    },
];
const searchKey = ref();
const query = ref({ pageNum: 1, pageSize: 10, sortBy: 'id', searchKey: '' });

const editableData = reactive({});
const edit = key => {
    editableData[key] = cloneDeep(dataSource.value.filter(item => key === item.id)[0]);
};
// 保存
const save = key => {
    console.log('editableData[key]', editableData[key]);
    updateOne(editableData[key]).then(res => {
        console.log('save', res);
        $.showToast({
            title: '修改成功',
            icon: 'success'
        })
        getList()
        delete editableData[key];
    })

};
// 删除
const del = key => {
    deleteOne(key).then(res => {
        $.showToast({
            title: '删除成功',
            icon: 'success'
        })
        getList()
        delete editableData[key];
    })
}
const cancel = key => {
    delete editableData[key];
};

// 新增
function addItem() {
    form.value = {}
    modalRef.value.openModal()
}
/** 提交按钮 */
function submitForm() {
    createOne(form.value).then(res => {
        console.log(res)
        modalRef.value.closeModal();
        getList()
    })
}

/** 查询井列表 */
function getList() {
    queryList(query.value).then((response) => {
        dataSource.value = response.content;
        total.value = response.totalElements;
    });
}
getList();

/** 搜索按钮操作 */
function handleQuery() {
    query.value.searchKey = searchKey;
    getList();
}

/** 表单重置 */
function reset() {
    searchKey.value = '';
    query.value = {
        pageNum: 1, pageSize: 10, sortBy: 'id',
        searchKey: '',
    }
    getList();
}

</script>
<style>
.ant-table-header {
    background-color: transparent;
}
</style>